<template>
  <a-modal
    :maskClosable="false"
    :destroyOnClose="true"
    title="详情页"
    centered
    :width="800"
    :footer="null"
    cancelText="审核不通过"
    okText="审核通过"
    v-model="visible"
  >
    <div class="content-one">
      <div class="line-one">申请单号：{{ infoData.orderCode }}</div>
      <div class="line-two">
        <span>{{ infoData.applyUserName }}提交的{{ orderTypeEnum[infoData.orderType] }}申请</span>
        <span class="status">
          <DictTag :options="Dict.getLocal('phaseStateDict')" :value="infoData.phaseState" isText />
        </span>
      </div>
      <div class="line-three">{{ infoData.orgName }}</div>
    </div>

    <div class="content-two">
      <div class="item">
        <span class="k">申请人：</span>
        <span class="v">{{ infoData.applyUserName }}（{{ infoData.applyUserPhone }}）</span>
      </div>
      <div class="item">
        <span class="k">申请撮合对象：</span>
        <span class="v">{{ infoData.memberContactsVo && infoData.memberContactsVo.leadingName }}</span>
      </div>
      <div class="item">
        <span class="k">撮合对象协会：</span>
        <span class="v">{{ infoData.memberContactsVo && infoData.memberContactsVo.orgTenantName }}</span>
      </div>
      <div class="item">
        <span class="k">撮合对象职务：</span>
        <span class="v">{{ infoData.memberContactsVo && infoData.memberContactsVo.levelName }}</span>
      </div>
      <div class="item">
        <span class="k">申请原因：</span>
        <span class="v">{{ infoData.remark }}</span>
      </div>
    </div>

    <div class="content-three">
      <div class="">撮合流程进度</div>
      <div class="item">
        <img class="icon" src="@/assets/icons/source/send.png" alt="" />
        <div class="info">
          <div class="title">发起申请</div>
          <div class="organ">
            <span>
              <span>{{ infoData.orgName }}</span>
              <a-divider type="vertical" />
              <span>{{ infoData.applylevelName }}</span>
              <a-divider type="vertical" />
              <span>{{ infoData.applyUserName }}</span>
            </span>
            <span>{{ infoData.createTime }}</span>
          </div>
        </div>
      </div>

      <div class="item">
        <img class="icon" src="@/assets/icons/source/approval.png" alt="" />
        <div class="info">
          <div class="disFlxAC">
            <span class="title _pr-10">审批人</span>
            <DictTag :options="Dict.getLocal('reviewStatusDict')" :value="infoData.orgAuditStatus" isText />
          </div>
          <div class="organ">
            <span>
              <span>{{ infoData.orgName }}</span>
              <a-divider type="vertical" />
              <span>{{ infoData.orgAuditUserName }}</span>
            </span>
            <span>{{ infoData.orgAuditTime }}</span>
          </div>
          <div class="remark">{{ infoData.orgAuditReason }}</div>
          <a-button
            class="btn"
            v-if="tenantId == infoData.orgTenantId && infoData.orgAuditStatus === reviewStatusEnum.STAY"
            type="primary"
            @click="handleShowApprovalModal"
            >立即审核</a-button
          >
        </div>
      </div>

      <div class="item" v-if="infoData.orgTenantId !== infoData.toOrgTenantId">
        <img class="icon" src="@/assets/icons/source/approval.png" alt="" />
        <div class="info">
          <div>
            <span class="title _pr-10">审批人</span>
            <DictTag :options="Dict.getLocal('reviewStatusDict')" :value="infoData.toOrgAuditStatus" />
          </div>
          <div class="organ">
            <span>
              <span>{{ infoData.toOrgName }}</span>
              <a-divider type="vertical" />
              <span>{{ infoData.toOrgAuditUserName }}</span>
            </span>
            <span>{{ infoData.toOrgAuditTime }}</span>
          </div>
          <div class="remark">{{ infoData.toOrgAuditReason }}</div>
          <a-button
            class="btn"
            v-if="tenantId == infoData.toOrgTenantId && infoData.toOrgAuditStatus === reviewStatusEnum.STAY"
            type="primary"
            @click="handleShowApprovalModal"
            >立即审核</a-button
          >
        </div>
      </div>

      <div class="item">
        <img class="icon" src="@/assets/icons/source/finish.png" alt="" />
        <div class="info title">系统自动拉群</div>
      </div>
    </div>
    <ApprovalModal ref="approvalModal" @success="getRecordDetail" />
  </a-modal>
</template>

<script>
import ApprovalModal from './approvalModal.vue'
import { RecordDetail } from '@/api/business/source'
import { reviewStatusEnum } from '@/enums/member'
import Vue from 'vue'
import { TENANTID } from '@/store/mutation-types'
import DictTag from '@/components/DictTag'
import { orderTypeEnum } from '@/enums/system'

export default {
  components: {
    ApprovalModal,
    DictTag
  },
  data() {
    return {
      visible: false,
      cancelLoading: false,
      okLoading: false,
      rowData: {},
      type: 'detail',
      dataType: 'inner',
      infoData: {
        memberContactsVo: {},
      },
      orderTypeEnum,
      reviewStatusEnum,
      tenantId: Vue.ls.get(TENANTID),
    }
  },
  methods: {
    show(data, type, dataType) {
      this.rowData = data
      this.type = type
      this.dataType = dataType
      this.getRecordDetail()
      this.visible = true
    },
    async getRecordDetail() {
      let res = await RecordDetail(this.rowData.id)
      this.infoData = res.data
      console.log('res---->', res)
    },
    handleShowApprovalModal() {
      this.$refs.approvalModal.show(this.rowData.id, this.dataType)
    },
  },
}
</script>

<style lang="less" scoped>
.content-one {
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 5px #eee solid;
  .line-two {
    font-size: 18px;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    .status {
      color: #f50;
    }
  }
  .line-three {
    font-size: 14px;
    font-weight: bold;
  }
}

.content-two {
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 5px #eee solid;
  .item {
    line-height: 30px;
    .k {
      color: #999;
    }
    .v {
      color: #222;
    }
  }
}

.content-three {
  .item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    .icon {
      width: 30px;
      height: 30px;
    }
    .info {
      margin-left: 15px;
      width: 100%;
      .status {
        color: #1890ff;
        margin-left: 20px;
      }
      .organ {
        margin: 10px 0;
        display: flex;
        justify-content: space-between;
      }
      .remark {
        color: #f50;
      }
      .btn {
        margin-top: 10px;
      }
    }
    .title {
      font-weight: bold;
    }
  }
}
</style>